$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
let $image = $('#image')
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
    $('#image').cropper(options)
    
// 头像上传-
    // 选择图片  渲染图片 上传头像
    $('#chooseImgBtn').on('click', function () {
        $('#chooseImgInp').click()
    })

    // 选择文件的时候触发的事件，value值发生改变就会触发这个事件
    $('#chooseImgInp').on('change', function () {
        // 获取文件
        let file = this.files[0]
        // 根据文件生成虚拟的路径
        if (file === undefined) {
            return layui.layer.msg('上传头像不能为空！')
        }
        let url = URL.createObjectURL(file)
        // console.log(url)
        // 更改图片
        // 先销毁再设置
        $image.cropper('destroy')
            .attr('src', url)
            .cropper(options)
    })

    // 上传头像
    $('#uploadBtn').on('click', function () {
        
        // 把图片转化为base64 格式的字符串
        var dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
            .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        
        
        
        // 文件上传
        axios({
            method: 'POST',
            url: '/my/update/avatar',
            // 只编译dataURL，不能编译前面的属性和等号
            data: 'avatar=' + encodeURIComponent(dataURL)
            
        }).then(res => {
            if (res.data.status !== 0) {
                    return layui.layer.msg(res.data.message)
            }
            layui.layer.msg('恭喜您 更改用户头像成功！')
            window.parent.getUserInfo()
            
        })
    })
    









})